<template>
  <div class="father">
      <h2>父组件</h2>
      <h4>房子：{{ house }}</h4>
      <button @click="changeChildToy">修改child1的玩具</button>
      <button @click="changeChild2Book">修改child2的书籍</button>
      <button @click="getChildren($refs)">获取所有的子组件,都加一本书</button>
      <div style="height: 20px;"></div>
      <Child ref="child" />
      <div style="height: 20px;"></div>
      <Child2 ref="child2" />
  </div>
</template>

<script setup lang="ts">
import Child from './Child.vue'
import Child2 from './Child2.vue'
import { ref } from 'vue'

// 数据
let house=ref(4)
let child=ref()
let child2=ref()

function changeChildToy() {
  console.log(child.value)
  child.value.toy = '洋娃娃'
}

function changeChild2Book() {
  console.log(child2.value)
  child2.value.book = '西游记'
}

// refs: { [key: string]: any }
function getChildren(refs:any) {
  for (let key in refs) {
    refs[key].book += '水浒传'
  }
}

// 向外部暴露数据
defineExpose({
  house
})
</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>